import React from 'react'
import {connect} from 'react-redux'
import {Route, withRouter, NavLink} from 'react-router-dom'

import 'component/common.scss'
import './Main.scss'
import NavHeader from 'component/NavHeader/NavHeader.jsx'
import Menu from '../Menu/Menu.jsx'
import Comment from '../Comment/Comment.jsx'
import Shoper from '../Shoper/Shoper.jsx'

class Main extends React.Component {
  changeTab(){

  }
  renderTabs(){
    let tabs = this.props.tabs
    return tabs.map((item) => {
      return(
        <NavLink 
          replace={true} 
          to={'/' + item.key} 
          key={item.key} 
          className='tab-item'
          activeClassName='active'
          onClick={() => this.changeTab(item)}
        >
          {item.name}
        </NavLink>
      )
    })
  }
    render() {
      let poiName = this.props.poiInfo.poi_info ? this.props.poiInfo.poi_info.name : ''

        return ( 
            <div className='detail'>
              <NavHeader title={poiName} />
              <div className="tab-bar">
                {this.renderTabs()}
              </div>
              <Route exact path='/menu' component={Menu} />
              <Route path='/comment' component={Comment} />
              <Route path='/shoper' component={Shoper} />
            </div>
        )
    }
}

export default withRouter(connect(
  state => ({
    tabs: state.tabReducer.tabs
  })
)(Main))